<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
	 <meta charset="utf-8" /> 
	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
	 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title>Z博客</title>

	<!--Bootstrap -->
     <link  th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" /> 
     <link rel="stylesheet"  type="text/css" media="all" th:href="@{/css/index.css}" /> 
	<style type="text/css">
 	.selfdivform{
    float: left;
    height: 30px;
    margin: 12px 12px;
    border: 0px;
   	padding:0px;
/*     padding: 12px 10px;
    font-size: 18px;
    line-height: 20px;
    width: 40%;
    -webkit-box-shadow: none;
    box-shadow: none;"
    display: block; */
	} 
	.selfdivform input{
	
	}
	</style>

  </head>
  
  <body>
	<!-- 导航条 -->
	<nav class="navbar navbar-default navbar-fixed-top ">
	 <div class="container">
	  <div class="navbar-header row" >
	    <!-- logo -->
	      <a class="navbar-brand" href="#">ZkcBlog</a>
		
<!-- 		<div class="selfdivform">
	     移动端
	    <form class=" navbar-toggle collapsed" style="height: 100%;margin: 0px;padding: 0px;border-radius: 15px;" >
          <input th:type="text"  th:placeholder="Search" style="height: 100%; padding-left:  2px;"/>
      	</form>
      	</div> -->
      	<div class="input-group navbar-toggle collapsed" style=" 
    float:left;
    padding: 0px 15px;
    margin-top: 8px;
    margin-right: -15px;
    margin-bottom: 8px;
    margin-left: -15px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    display: inline-block;">
		  <input type="text" class="form-control" style="width: 80%"  placeholder="Recipient's username" aria-describedby="basic-addon2" />
		  <span class="glyphicon glyphicon-search"></span>
		</div>

 		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#" >
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	    </button>
	  </div>
	  <!-- 自适应菜单栏 -->
	  <div class="navbar-right navbar-collapse collapse">
	  <ul class="nav navbar-nav" >
	  	<li><a>首页</a></li>
	   	<li><a>文章归档</a></li>
	  	<li><a>文章分类</a></li>
	   	<li><a>关于网站</a></li>
	  </ul>
	  <form class="navbar-form navbar-left" id="searchform">
        <div class="form-group">
          <input th:type="text" class="form-control" th:placeholder="Search"/>
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </form>
      </div>
	 </div>
	</nav>
	
	<!-- 中间主体 -->
	<!-- 底部 -->

	<!--     jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script th:src="@{/jquery/jquery-2.1.1.min.js}" />
	<!--     加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" />  
  </body>
</html>